<template>
  <div>
    <!-- 导航栏 -->
    <div>
      <nav id="property-control">
        <a class="layer_c control-active" v-on:click="controlClick" title="查看图层">图层</a>
        <a class="district_c" v-on:click="controlClick" title="选择行政区">行政区</a>
      </nav>
    </div>

    <div id="layer-control" class="control">
      <div class="layer" v-for="layer in tocLayers" id="layer_{{$index}}">
        <a>
          <label for="{{$index}}" v-on:click.stop="checkSublayer(layer.id,$index,$event)" title="{{layer.id}}">
            <Icon type="ios-arrow-right" v-if="layer.collapsed==true"></Icon>
            <Icon type="ios-arrow-down" v-if="layer.collapsed==false"></Icon>
            <Icon type="folder" v-if="layer.items!==undefined"></Icon>
            <i class="type-icon {{layer.type}}" v-if="layer.items==undefined"></i>
            <span>{{layer.id}}</span>
          </label>
          <div class="visibility">
            <Icon type="eye-disabled" v-if="layer.visibility=='none'" v-on:click='visibilityChange(layer,$index)' data-name="{{name}}" data-type='layout'></Icon>
            <Icon type="eye" v-else v-on:click='visibilityChange(layer,$index)' data-name="{{name}}" data-type='layout'></Icon>
          </div>
          <div v-if="layer.items!==undefined" class="sublayer" v-show="layer.collapsed==false">
            <div v-for="item in layer.items" title="{{item.id}}" name="{{item.id}}" id="sublayer_{{item.id}}" class="sublayer-item">
              <label for="{{$index}}" v-on:click.stop="showPropertyPanel(item.id)" title="{{layer.id}}">
                <i class="type-icon {{item.type}}"></i>
                <span name="{{item.id}}">{{item.id}}</span>
              </label>
              <div class="visibility">
                <Icon type="eye-disabled" v-if="item.visibility=='none'" v-on:click='visibilityChange(item,$index)' data-name="{{name}}" data-type='layout'></Icon>
                <Icon type="eye" v-else v-on:click='visibilityChange(item,$index)' data-name="{{name}}" data-type='layout'></Icon>
              </div>
            </div>
            
          </div>
        </a>
      </div>
    </div>

    <div id="district-control" class="control">
      <District class="district"></District>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  methods:{
    //属性面板的tab菜单
    controlClick:function(e){
      //移除之前的active
      $('.control-active').removeClass("control-active");
      //给当前的dom添加active
      $(e.target).addClass("control-active");

      $(".control").css("display","none");
      if($(e.target).hasClass("layer_c")){
        $("#layer-control").css("display","block");
      }
      if($(e.target).hasClass("district_c")){
        $("#district-control").css("display","block");
      }
    },
    //根据样式中的layers创建TocLayers，用户显示样式图层列表及文件夹
    createTocLayer: function(style){
      var styleObj = JSON.parse(JSON.stringify(style));
      var groups = styleObj['metadata']?(styleObj['metadata']['mapbox:groups']?styleObj['metadata']['mapbox:groups']:{}):{}
      this.Folders = groups;
      var layers = styleObj['layers'];
      layers.reverse();
      var mylayers = [];
      var layerIndex = -1
      for(let i=0,length=layers.length;i<length;i++){
        var layer = layers[i];
        this.fixType(layer);
        layer.visibility = layer.layout?(layer.layout.visibility?layer.layout.visibility:'visible'):'visible';
        if(layer['metadata']&&layer['metadata']['mapbox:group']){
          var layername = groups[layer['metadata']['mapbox:group']].name;
          var collapsed = groups[layer['metadata']['mapbox:group']].collapsed;
          if(mylayers[layerIndex]&&mylayers[layerIndex]['id'] == layername){
            mylayers[layerIndex]['items'].push(layer);
          }else{
            layerIndex++;
            mylayers[layerIndex] = {};
            mylayers[layerIndex]['visibility'] = 'none';
            mylayers[layerIndex]['items'] = [];
            mylayers[layerIndex]['id'] = layername;
            mylayers[layerIndex]['collapsed'] = collapsed;
            mylayers[layerIndex]['items'].push(layer);
          }
          if(!layer.layout||layer.layout.visibility!=="none"){
            mylayers[layerIndex]['visibility'] = 'visible';
          }
        }else{
          layerIndex++;
          mylayers[layerIndex] = layer;
        }
      }
      return mylayers;
    },
    fixType: function(layer){
      //有的layer没有type属性，有ref属性,补充这个信息
      if(layer.type === undefined && layer.ref){
        var layers = this.styleObj.layers;
        for(let i=0,length=layers.length;i<length;i++){
          if(layers[i].id === layer.ref){
            layer.type = layers[i].type;
            break;
          }
        }
      }
    },
    //点击文件夹时检查文件夹的展开状态以及图层列表
    checkSublayer:function(layer_id,index,e){
      //切换active
      var activeLayer = this.$el.querySelector('.layer.active');
      var ct = $(e.target).parents(".layer")[0];
      if(activeLayer&&activeLayer.className.indexOf('active')!==-1){
        activeLayer.className = activeLayer.className.replace(' active','');
      }
      if(ct.className.indexOf('active') === -1&&activeLayer !== ct){
        ct.className += ' active';
      }
      var collapsed = this.tocLayers[index].collapsed;
      // 如果是group
      if( collapsed !== undefined){
        var metadata = this.styleObj['metadata'];
        //change metadata's collapsed
        this.tocLayers[index].collapsed = !collapsed;
        if(metadata&&metadata['mapbox:groups']){
          var metadatagroup = metadata['mapbox:groups'];
        }
        for(let index in metadatagroup){
          if(layer_id === metadatagroup[index].name){
            metadatagroup[index].collapsed = !collapsed;
          }
        }
        var data = JSON.parse(JSON.stringify(this.styleObj));
        this.$dispatch("broadcast-style",data);
      }
    },
    //图层可见控制
    visibilityChange:function(layer,index){
      var layers = this.styleObj.layers;
      var value = layer.visibility === 'visible'?'none':'visible';
      if(layer.items){
        for(let j=0;j<layer.items.length;j++){
          for(let i=0,length=layers.length;i<length;i++){
            if(layers[i].id === layer.items[j].id){
              if(!layers[i].layout){
                layers[i].layout = {};
              }
              layers[i].layout.visibility = value;
              break;
            }
          }
        }
      }else{
        for(let i=0,length=layers.length;i<length;i++){
          if(layers[i].id === layer.id){
            if(!layers[i].layout){
              layers[i].layout = {};
            }
            layers[i].layout.visibility = value;
            break;
          }
        }
      }
      
      var data = JSON.parse(JSON.stringify(this.styleObj));
      this.$dispatch("broadcast-style",data);
      /*this.$store.commit('PATCH_STYLE', data)*/
    }
  },
  data(){
    return {
      tocLayers: [],
      Folders:{},
      styleObj:{}
    }
  },
  events:{
    'style-change':function(style){
      this.styleObj = style;
      this.tocLayers = this.createTocLayer(style);
    }
  }
}
</script>

<style scoped>
#property-control{
  width: 225px;
  margin: 5px auto;
  border-radius: 15px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 30px;
  box-sizing: border-box;
  background-color: #E5E2D3;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

#property-control a{
  color: #000;
  box-sizing: border-box;
  width: 125px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 15px;
  padding-top: 5px;
}

#property-control .control-active{
  color: #FFF;
  background-color: #1f78ba;
}

#district-control{
  display: none;
}

#layer-control {
  padding-top: 5px;
  border-top: none;
  border-left: none;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 60px);
  font-size: 14px;
  font-family: Microsoft YaHei, Arial, Verdana, Helvetica, AppleGothic, sans-serif;
  color: #333;
  scrollbar-track-color:#f5f5f5;
  scrollbar-face-color:#dcdcdc;
  clear: both;
}

#layer-control .visibility{
  width: 30px;
  float: right;
}
.type-icon:before{
  font-family: icon;
  font-style: normal;
  font-size: 18px;
  color: #4c4c4c;
}

.type-icon.symbol:before{
  content: "\e967";
}
.type-icon.line:before{
  content: "\e97e";
}
.type-icon.fill:before{
  content: "\e97d";
}
.type-icon.fill-extrusion:before{
  content: "\e9af";
}
.type-icon.circle:before{
  content: "\e97c";
}
.type-icon.raster:before{
  content: "\e983";
}
.type-icon.background:before{
  content: "\e947";
}
a {
  color: rgb(128,128,128);
}

.layer {
  vertical-align: middle;
  border:0;
  margin: 10px 0;
  box-sizing: border-box;
}

.layer a {
  display: inline-block;
  line-height: 25px;
  width: 100%;
  padding-left: 5px;
}

.layer a:hover {
  background-color: rgba(247, 223, 128, 0.55);
}

.layerover {
  border-top: #ff4081 1px solid;
}

.layer a label{
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

.layer a>label{
    width: calc(100% - 30px);
    display: inline-block;
}

.layer i {
  font-size: 16px;
  vertical-align: middle;
}

.layer.active {
  background-color: rgba(247, 223, 128, 0.55);
}

.sublayer {
  margin-left: 20px;
}

.sublayer .sublayer-item {
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  margin: 10px 0px;
}
.sublayer .sublayer-item>label{
  width: calc(100% - 30px);
  display: inline-block;
}

.sublayer-over {
  font-weight: bolder;
}

</style>
